/* zoom */
.zoom-in-enter-active,
.zoom-out-leave-active {
  transition: transform var(--transition-time, .2s);
}

.zoom-in-enter-from,
.zoom-out-leave-to {
  transform: scale(0);
}

/* zoom-up */
.zoom-in-up-enter-active,
.zoom-out-up-leave-active {
   
  transition: transform var(--transition-time, .2s);
}

.zoom-in-up-enter-from {
  transform: translateY(50%) scale(0);
}

.zoom-out-up-leave-to {
  transform: translateY(-50%) scale(0);
}

/* zoom-down */
.zoom-in-down-enter-active,
.zoom-out-down-leave-active {
  transition: transform var(--transition-time, .2s);
}

.zoom-in-down-enter-from {
  transform: translateY(-50%) scale(0);
}

.zoom-out-down-leave-to {
  transform: translateY(50%) scale(0);
}

/* zoom-left */
.zoom-in-left-enter-active,
.zoom-out-left-leave-active {
  transition: transform var(--transition-time, .2s);
}

.zoom-in-left-enter-from {
  transform: translateX(50%) scale(0);
}

.zoom-out-left-leave-to {
  transform: translateX(-50%) scale(0);
}

/* zoom-right */
.zoom-in-right-enter-active,
.zoom-out-right-leave-active {
  transition: transform var(--transition-time, .2s);
}

.zoom-in-right-enter-from {
  transform: translateX(-50%) scale(0);
}

.zoom-out-right-leave-to {
  transform: translateX(50%) scale(0);
}